<style type="text/css" lang="less" scoped="scoped">
	@import url("../../assets/less/common.less");
	.ivu-modal {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -208px;
		margin-top: -120px;
	}
	.ivu-form {
		border-bottom: 1px dashed #c0c0c0;
		margin-bottom: 10px;
	}
</style>

<template>
	<div class="content">
		<Form :model="formItem" :label-width="80" label-position="right">
			<Row>
				<Col span="8">
				<FormItem label="用户名">
					<Input v-model.trim="formItem.userName" clearable></Input>
				</FormItem>
				</Col>
				<Col span="8">
				<FormItem label="电话">
					<Input v-model.trim="formItem.phone" clearable></Input>
				</FormItem>
				</Col>
			</Row>
		</Form>
		<div class="searchInfo clear">
			<div class="left">
				<Button icon="md-add" @click="addUser">添加</Button>
				<!--<Button icon="ios-trash" :disabled="DelbtnDisabled" @click="BtnDelClick">删除</Button>-->
			</div>
			<div class="right">
				<Button type="primary" icon="md-search" @click="searchInfo">查询</Button>
				<Button icon="md-undo" @click="reset">重置</Button>
			</div>
		</div>

		<!--数据表格-->
		<Table border stripe :loading="listLoading" @on-selection-change="tableSelectChange" :columns="columns" :data="data"></Table>
		<Row style="margin-top: 15px;">
			<Col span="14" offset="14">
			<Page :total="total" show-elevator show-sizer show-total/>
			</Col>
		</Row>
	</div>
</template>
<script>
	import {get, post, del} from '@/api/ajax'
	
	export default {
		data() {
			return {
				formItem: {userName: '',phone: ''},
				total: null,
				columns: [{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '用户名',
						key: 'name',
						sortable: true,
						align: 'center'
					},
					{
						title: '电话',
						key: 'phone',
						align: 'center'
					},
					{
						title: '邮箱',
						key: 'email',
						align: 'center'
					},
					{
						title: '部门',
						key: 'partment',
						align: 'center'
					},
					{
						title: '创建时间',
						key: 'time',
						sortable: true,
						align: 'center'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.index)
										}
									}
								}, '详情'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.row)
										}
									}
								}, '删除')
							]);
						}
					}
				],
				data: [],
//				DelbtnDisabled: true,
				listLoading: true,
//				tableSelection: [], //被选中的数据
			}
		},
		created() {
			this.getList();
		},
		methods: {
			show(index) { //显示详情
				this.$Modal.info({
					title: '用户信息',
					content: `
				            用户名：${this.data[index].name}<br>
			                     电话：${this.data[index].phone}<br>
			                    邮箱：${this.data[index].email}<br>
			                     部门：${this.data[index].partment}<br>
			                     创建时间：${this.data[index].time}<br>
                    `
				})
			},
			searchInfo(){  //查找用户
				let _user = {
				    	  name:this.formItem.userName,
				          phone:this.formItem.phone
				    }
				get('http://localhost:3000/users',_user)
                          .then(res => {
                          	console.log(res)
                          	this.data = res;
			           	    this.total = 1;
						  })
						  .catch(error => {
						    this.$Message.error('未查询到用户信息！');
						  });
            },
			reset(){
				this.formItem = {userName: '',phone: '',};
				this.getList();
			},
			getList() { //获取用户列表
				this.listLoading = true;
				get('http://localhost:3000/users')
					.then(res => {
						this.listLoading = false;
						this.data = res;
						this.total = res.length;
					}, (err) => {
						this.$Message.error('获取信息失败！');
						this.listLoading = false;
					})
			},
			remove(row) { //删除单个用户
			    del('http://localhost:3000/users/'+row.id)
					.then(response => {
						this.getList();
						this.$Message.success('操作成功!');
					}, (err) => {
						this.$Message.error('操作失败');
						this.listLoading = false;
					})
			},
			addUser() { //添加用户
				this.$router.push({name:"addUser"});
            },
			tableSelectChange(selection) { //获取选中的用户列表
				this.tableSelection = selection;
			}
		},
		watch: {
			tableSelection() { //获取选中的个数
				if(this.tableSelection.length === 0) {
					this.DelbtnDisabled = true;
				} else {
					this.DelbtnDisabled = false;
				}
			}
		}
	}
</script>